<template>
  <a-modal :visible="visible" title="设置网关" @ok="handleOk" @cancel="$emit('update:visible', false)">
    <a-radio-group v-model:value="_getway" :style="{ display: 'block' }">
      <a-radio v-for="getway in preGetWayList" :key="getway" :value="getway">{{ getway }}</a-radio>
    </a-radio-group>
    当前网关： {{ getway || '-' }}
    <a-input placeholder="请输入网关,例如: http://127.0.0.1" v-model:value="_getway"></a-input>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, unref, watch } from "vue";
import { message } from 'ant-design-vue';
import { useLocalStorage } from "@vueuse/core";

export default defineComponent({
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
    getway: {
      default: "",
      type: String,
    },
  },
  setup(props, { emit }) {
    const _getway = ref("");
    const handleOk = (e: MouseEvent) => {
      e.preventDefault();
      message.warn("正在加载数据，请稍后...")
      emit("update:visible", false);
      emit("save", unref(_getway));
    };

    const preGetWayList = useLocalStorage("pre-getway-list", [
      "http://172.16.1.1:9999",
      "http://192.168.1.1:9999",
    ]);

    watch(
      () => props.getway,
      (_) => {
        if (!unref(preGetWayList).includes(_)) {
          preGetWayList.value.push(_)
        }
        _getway.value = _;
      }
    );

    return {
      handleOk,
      _getway,
      preGetWayList,
    };
  },
});
</script>
